<template>
	<view style="padding: 20rpx 30rpx;">
		<view :style="{height: statusBarHeight+'px'}"></view>
		<view style="font-size: 32rpx;justify-content: space-between;color: #000000;"class="u-flex">
			<view @click="ListClick" style="width: 130rpx;">{{show == true?'取消':''}}全选</view>
			<view>
				<h3 style="margin-right: 30rpx;">全部书籍</h3>
				<text style="font-size: 23rpx;color: #808080;">已选择{{activeBook.length}}本书</text>
			</view>
			<view @click="tuiClick">完成</view>
		</view>
		<view style="margin:50rpx 0;"class="u-flex">
			<view v-for="(item,index) in centenr" :key="index"
				style="text-align: center;margin-right: 10rpx;" @click="centenrClick(item.id)">
				<text class="textcentenr"
					:class="activecentenr == item.id?'activecentenr':''">
					{{item.name}}
				</text>
			</view>
		</view>
		<view style="flex-wrap: wrap;"class="u-flex">
			<view v-for="(item,index) in bookshelfData" :key="index" style="position: relative; width: 33.3%;
			align-items: center;margin-bottom: 50rpx;"class="u-flex-col"
			@click="itemClick(item.bookdataId)" v-if="activecentenr == 1">
				<bookshelf-item :item="item" ></bookshelf-item>
				<radio style="position: absolute;bottom: 160rpx;right: 20rpx;" :checked="item.disabled" color="#E27037">
				</radio>
			</view>
		</view>
		<view v-if="activecentenr != 1" style="text-align: center;margin-top: 100rpx;">
			<text style="color: #999999;font-size: 36rpx;">暂无数据</text>
		</view>
		<view style="padding: 20rpx;background-color: #E27037;position: fixed;border-radius: 50%;
		bottom: 80rpx;right: 80rpx;" :class="activeBook.length == 0?'trash':'activeTrash'">
			<u-icon name="trash" size="40" @click="deleteClick" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				activecentenr:1,
				centenr:[
					{id:1,name:"全部"},
					{id:2,name:"已下架"},
				],
				bookshelfData:[],
				activeBook:[],
				statusBarHeight:0
			}
		},
		mounted() {
			let that = this
			//获取手机系统信息
			const info = uni.getSystemInfoSync()
			//设置状态栏高度
			that.statusBarHeight = info.statusBarHeight
			
		},
		methods: {
			centenrClick(e){
				this.activecentenr = e
			},
			async getBookshelfData(){
				const res=await this.$myRequst({
					url:"/bookshelf/gets/"+uni.getStorageSync("userId")
				})
				this.bookshelfData = res.data.data.map((item)=>{
					return{
						...item,
						disabled:false
					}
					
				})
				console.log(this.bookshelfData)
			},
			itemClick(e){

				console.log(e)
				let item = this.bookshelfData.find(item=>item.bookdataId == e)
				this.bookshelfData.find(item=>item.bookdataId == e).disabled = !item.disabled
				// activeBook
				if(this.bookshelfData.find(item=>item.bookdataId == e).disabled){
					this.activeBook.unshift(item)
				}else{
					//除了被取消的其余全部赛选进原数组
					this.activeBook = this.activeBook.filter(i =>i.bookdataId != item.bookdataId)
				}
				if(this.activeBook.length == this.bookshelfData.length){
					this.show = true
				}else{
					this.show = false
				}
				console.log(this.activeBook)
			},
			ListClick(){
				this.activeBook = []
				if(!this.show){
					this.bookshelfData.forEach(item=>item.disabled = true)
					this.activeBook = this.bookshelfData
					this.show = true
				}else{
					this.bookshelfData.forEach(item=>item.disabled = false)
					this.show = false
				}
				
				
			},
			deleteClick(){
				if(this.activeBook.length == 0){
					return
				}
				this.activeBook.forEach((item)=>{
					this.getDeleteBook(item.id)
				})
			},
			async BookDELETE(id){
				const res=await this.$myRequst({
					url:"/bookshelf/delete/"+id,
					method:"DELETE"
					
				})
				if(res.data.code == 200){
					uni.showToast({
						title:"删除成功",
						icon:"none",
						position:"top"
					})
					setTimeout(()=>{
						uni.switchTab({
							url:"../shuj"
						})
					},1000)
				}
			},
			getDeleteBook(id){
				uni.showModal({
					title:"确认删除吗？",
					confirmColor:"#E27037",
					confirmText:"删除",
					success: (res) => {
						console.log(res)
						if(res.confirm){
							this.BookDELETE(id)
						}
					}
				})

			},
			tuiClick(){
				uni.navigateBack({
					
				})
			}
			// saveHistroy(){//bookIntroduce id
			// 	console.log(this.bookIntroduce)
			// 	let bookItemArr = uni.getStorageSync("bookItemArr") || []
			// 	let item ={
			// 		id:this.bookIntroduce.id,
			// 		imageUrl:this.bookIntroduce.imageUrl,
			// 		name:this.bookIntroduce.name,
			// 		state:this.bookIntroduce.state,
			// 		types:this.bookIntroduce.types,
			// 		score:this.bookIntroduce.score,
			// 		looktime:Date.now()
			// 	}
			// 	let index = bookItemArr.findIndex(i=>{ //判断是否重复，没有就返回-1
			// 		return i.id == this.bookIntroduce.id
			// 	})
			// 	console.log(index)
			// 	if(index >=0){
			// 		bookItemArr.splice(index,1)//删除
			// 	}
			// 	bookItemArr.unshift(item)//向前追加对象
			// 	// bookItemArr = bookItemArr.slice(0,20)
				
			// 	uni.setStorageSync("bookItemArr",bookItemArr)
			// }
		},
		onLoad() {
			this.getBookshelfData()
		}
	}
</script>

<style>
.textcentenr{
	padding: 15rpx 30rpx;
	background-color: #F7F7F7;
	border-radius: 0.5em;
}
.activecentenr{
	background-color: #FEEFE8;
	color: #E27037;
	font-weight: bold;
}
.activeTrash{
	opacity: 1;
}
.trash{
	opacity: 0.5;
}
</style>
